<template>
    <el-select v-model="value" placeholder="请选择" @change="changeValue" v-loadMore="loadM" filterable remote :remote-method="filterData" >
        <el-option v-for="item in copyResult.slice(0, this.maxLength)" :key="item.id" :label="item.name" :value="item.id" @click.native="optionEmit(item)"   >
            <slot :item="item"></slot>
        </el-option>
    </el-select>
</template>
    
<script>
import axios from "axios"
import { throttle } from "@/utils/tools"; // 封装的函数节流
export default {
    name: 'MySelect',
    props: {
        url:{
            type:String,
            default:"",
            require:true
        },
        myValue:{
            type:Number|String,
            default:1,
            require:true
        }
    },
    data() {
        return {
            // result: [{
            //     "id": 1,
            //     "name": "条目1"
            // },
            // {
            //     "id": 2,
            //     "name": "条目2"
            // }],
            result: [],
            showResult: [],
            copyResult: [],
            maxLength: 100,
            value: this.myValue
            //value:this.getValue
        }
    },
    directives: {
        "loadMore": (el, binding, vnode) => {
            const DROPDOWN_DOM = el.querySelector(
                ".el-select-dropdown .el-select-dropdown__wrap"
            );
            if (DROPDOWN_DOM) {
                DROPDOWN_DOM.addEventListener('scroll', throttle(function(){
                    const condition =
                        this.scrollHeight - this.scrollTop - 1 <= this.clientHeight;
                    if (condition) {
                        //执行绑定的值，如果是函数就加个括号
                        binding.value();
                    }
                }),200)
            }
        }
    },
    computed: {

    },
    created() {
        this.getData(this.url)
    },
    watch: {
        myValue(newVal, oldVal) {
            this.value = newVal
        }
    },
    methods: {
        changeValue() {
            this.$emit("update:myValue", this.value)
        },
        getData(url) {
            //console.log("getData"+url)
            if (url) {
                axios.get(url).then((res) => {
                    // console.log(res.data)
                    this.result = res.data
                  
                    this.copyResult = JSON.parse(JSON.stringify(res.data))
                  
                    this.showResult = this.copyResult.slice(0, this.maxLength)
                }).catch((err) => {
                    console.log(err)
                })
            }
        },
        loadM() {
            console.log("loadM")
            this.maxLength += 5
            //this.showResult = this.copyResult.slice(0, this.maxLength)
            
        },
        filterData(val){
            //console.log("filterData"+val)
            // 模糊搜索输入框
            this.copyResult=this.result.filter((item)=>item.name.toLowerCase().includes(val.toLowerCase())).slice(0,100)
        },
        optionEmit(item){
            this.$emit('optionClick',item)
        }
    }
}
</script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
    